<!-- 鞋面收发料查询：jzy -->
<template>
  <div class="app-container">
    <Find @clickNumber="clickNumber" :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

    <el-card shadow="always" :body-style="{ padding: '5px 10px 5px' }" class="mt10">
      <div></div>
      <Table
        :tableHeader="tableHeader"
        :tableData="tableData"
        class="mt10"
        :isLoading="isLoading"
        :summaryData="summaryData"
        summary
        @sortChange="sortChange"
        :outTableHeight="20"
      />
      <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'QueryReceivingReceivingMaterials'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import Find from '@/components/Find/index.vue'
import { selectList } from '@/plugins/mixin'
import fileRequest from '@/utils/fileRequest'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '部门',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入部门名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '出入库时间',
    dateValue: ''
  },
  {
    type: 'radio',
    checkboxLabel: '收料',
    label: '1'
  },
  {
    type: 'radio',
    checkboxLabel: '发料',
    label: '2'
  },
  {
    type: 'button',
    checkboxLabel: '搜索'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])
const tableHeader = ref([
  {
    label: '出入库时间',
    prop: 'date'
  },
  {
    label: '收发料类型',
    prop: 'slipType'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '指令',
    prop: 'lotNo'
  },

  {
    label: '订单数量',
    prop: 'orderQty'
  },

  {
    label: '部门',
    prop: 'deptNo'
  },
  {
    label: '部门名称',
    prop: 'deptName'
  },
  {
    label: '出入库数量',
    prop: 'qty'
  },

  {
    label: '操作员',
    prop: 'sysUser'
  }
])
// 表一模块
// '置空'按钮
const findClicked = async (content: string) => {
  if (content === '搜索') {
    getTableList()
  }
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
    getTableList()
  }
  if (content === '导出') {
    try {
       let res = await fileRequest.post('/pcFactorStockQuery/getStitchDetailExport', {
        color: formList.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料颜色'
        )?.inputValue,
        deptName: formList.value
          .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '部门')
          ?.selectValue?.split('  ')[0],
        deptNo: formList.value
          .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '部门')
          ?.selectValue?.split('  ')[1],
        // factory: formList.value.find((item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工厂')?.inputValue,
        lotNo: formList.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
        )?.inputValue,
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        slipDateEnd: formList.value.find(
          (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出入库时间'
        )?.dateValue?.[1],
        slipDateStart: formList.value.find(
          (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出入库时间'
        )?.dateValue?.[0],
        slipType: flag.value,
        style: formList.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入型体'
        )?.inputValue
      }) as any
      const link = document.createElement('a') // 利用a标签自定义下载文件名
      let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
      link.style.display = 'none'
      //设置连接
      link.href = window.URL.createObjectURL(blob)
      const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
      link.download = FileName //自定义文件名字
      document.body.appendChild(link)
      //模拟点击事件
      link.click()
      document.body.removeChild(link)
    } catch (error) {
      ElMessage.error(i18n.global.t('message.error'))
    }
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 6,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

const order = ref('')
const flag = ref('I')
const clickNumber = (val: any) => {
  if (val === '1') {
    flag.value = 'I'
  } else if (val === '2') {
    flag.value = 'O'
  }
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.put<any, any>('/pcFactorStockQuery/getStitchDetail', {
    color: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料颜色'
    )?.inputValue,
    deptName: formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '部门')
      ?.selectValue?.split('  ')[0],
    deptNo: formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '部门')
      ?.selectValue?.split('  ')[1],
    // factory: formList.value.find((item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工厂')?.inputValue,
    lotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    slipDateEnd: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出入库时间'
    )?.dateValue?.[1],
    slipDateStart: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出入库时间'
    )?.dateValue?.[0],
    slipType: flag.value,
    style: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入型体'
    )?.inputValue
  })
  isLoading.value = false
  tableData.value = tableDataList.list.map((item: any) => {
    item.slipType = item.slipType === 'I' ? '收料' : '发料'
    return item
  })
  total.value = tableDataList.total
  // currentRow()
  summaryData.value[0].num = tableDataList.countDto.qty
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

// 排序
const sortChange = (sort: string) => {
  if (sort === 'ascending') {
    console.log('升序')
    order.value = '1'
  } else if (sort === 'descending') {
    console.log('降序')
    order.value = '2'
  } else {
    console.log('取消排序')
    order.value = ''
  }
  getTableList()
}

const getSelectList = async () => {
  const mtlDept = formList.value.find(
    (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '部门'
  ) as any
  const mtlDeps = await service.get<any, any>('/back/deptQuery')
  mtlDeps.forEach((Vendor: any) => {
    mtlDept.selectOptions.push({
      optionLabel: `${Vendor.deptName}  ${Vendor.deptNo}`,
      optionValue: `${Vendor.deptName}  ${Vendor.deptNo}`,
      optionKey: `${Vendor.deptNo} `
    })
  })
}
onMounted(() => {
  getSelectList()
})
</script>

<style lang="less" scoped></style>
